<template>
	<view >
		<!-- 导航栏 -->
		<tab-swiper-head :tabIndex="tabIndex" :tabBars="tabBars" @tapTab="tap"></tab-swiper-head>
			<view class="uni-tab-bar" :style="{height:TabHeight+'px'}" >
				
			<swiper class="swiper-box" :current="tabIndex" @change='tabChange'  >
				
				<swiper-item  v-for="(items ,index) in newList" :key="index">
				
					<scroll-view scroll-y="true" class="list" @scrolltolower="lodemore(index)">
						<!-- 没有内容显示 -->
						
						<template  v-if="index>items.list.length||index<0">
							
							<nothing></nothing>
						</template>
						<!-- 图文列表 -->
						<template v-else>
						<block v-for="(item ,index1) in items.list" :key="index1">
							<index-list @caozuo="caozuo($event)" :index="index1" :item="item"></index-list>
							
						</block>
						
						<!-- 上拉刷新 -->
					<load-more :message="items.message"></load-more>
					</template>
					
				</scroll-view>
				</swiper-item>
				
			</swiper>
			</view>
	

	</view>
</template>

<script>
	import indexList from '../../components/index/index-list.vue'
	import tabSwiperHead from '../../components/index/tab-swiper-head.vue'
	import loadMore from '../../components/common/load-more.vue'
	import nothing from '../../components/common/nothing.vue'
	export default {
		components:{
			indexList,
			tabSwiperHead,
			loadMore,
			nothing
		},
		data() {
			return {
				index:0,
				TabHeight:500,//高度
				tabIndex:0,//导航栏列表下标
				tabBars: [{
				    name: '关注',
				    id: 'guanzhu'
				}, {
				    name: '推荐',
				    id: 'tuijian'
				}, {
				    name: '体育',
				    id: 'tiyu'
				}, {
				    name: '热点',
				    id: 'redian'
				}, {
				    name: '财经',
				    id: 'caijing'
				}],
				newList:[
							{
									message:'上拉加载更多',
					list:[
							
								{
									userHeadr:'../../static/demo/datapic/10.jpg',
									userName:'张三',
									title:'我是标题啊',
									isGuanZhu:1, // 0 未关注 1 关注
									imgSrc:'../../static/demo/datapic/11.jpg',//图片路径
									type:'video',
									play:200000,
									infoNum:{
										ding:12,
										cai:12,
										infoType:1 ,//0 没操作 1顶了  2 踩
										discussNum:12,//评论数量
										shareNum:12//分享数量
									}
								},
								{
									userHeadr:'../../static/demo/datapic/10.jpg',
									userName:'张三',
									title:'我是标题啊a',
									isGuanZhu:1, // 0 未关注 1 关注
									imgSrc:'../../static/demo/datapic/11.jpg',//图片路径
									type:'img',
									play:200000,
									infoNum:{
										ding:12,
										cai:12,
										infoType:2 ,//0 没操作 1顶了  2 踩
										discussNum:12,//评论数量
										shareNum:12//分享数量
									}
								}
							]
						},
						{
							message:'上拉加载更多',
							list:[
								{
									userHeadr:'../../static/demo/datapic/10.jpg',
									userName:'张三',
									title:'我是标题啊',
									isGuanZhu:1, // 0 未关注 1 关注
									imgSrc:'../../static/demo/datapic/11.jpg',//图片路径
									type:'img',
									play:200000,
									infoNum:{
										ding:12,
										cai:12,
										infoType:1 ,//0 没操作 1顶了  2 踩
										discussNum:12,//评论数量
										shareNum:12//分享数量
									}
								},
								{
									userHeadr:'../../static/demo/datapic/10.jpg',
									userName:'张三',
									title:'我是标题啊',
									isGuanZhu:1, // 0 未关注 1 关注
									imgSrc:'../../static/demo/datapic/11.jpg',//图片路径
									type:'img',
									play:200000,
									infoNum:{
										ding:12,
										cai:12,
										infoType:1 ,//0 没操作 1顶了  2 踩
										discussNum:12,//评论数量
										shareNum:12//分享数量
									}
								}
							]
						},
						{
							message:'上拉加载更多',
							list:[
								{
									userHeadr:'../../static/demo/datapic/10.jpg',
									userName:'张三',
									title:'我是标题啊',
									isGuanZhu:1, // 0 未关注 1 关注
									imgSrc:'../../static/demo/datapic/11.jpg',//图片路径
									type:'img',
									play:200000,
									infoNum:{
										ding:12,
										cai:12,
										infoType:1 ,//0 没操作 1顶了  2 踩
										discussNum:12,//评论数量
										shareNum:12//分享数量
									}
								},
								{
									userHeadr:'../../static/demo/datapic/10.jpg',
									userName:'张三',
									title:'我是标题啊',
									isGuanZhu:1, // 0 未关注 1 关注
									imgSrc:'../../static/demo/datapic/11.jpg',//图片路径
									type:'img',
									play:200000,
									infoNum:{
										ding:12,
										cai:12,
										infoType:1 ,//0 没操作 1顶了  2 踩
										discussNum:12,//评论数量
										shareNum:12//分享数量
									}
								}
							]
						},
						{
							message:'上拉加载更多',
							list:[
								{
									userHeadr:'../../static/demo/datapic/10.jpg',
									userName:'张三',
									title:'我是标题啊',
									isGuanZhu:1, // 0 未关注 1 关注
									imgSrc:'../../static/demo/datapic/11.jpg',//图片路径
									type:'video',
									play:200000,
									infoNum:{
										ding:12,
										cai:12,
										infoType:1 ,//0 没操作 1顶了  2 踩
										discussNum:12,//评论数量
										shareNum:12//分享数量
									}
								},
								{
									userHeadr:'../../static/demo/datapic/10.jpg',
									userName:'张三',
									title:'我是标题啊',
									isGuanZhu:1, // 0 未关注 1 关注
									imgSrc:'../../static/demo/datapic/11.jpg',//图片路径
									type:'img',
									play:200000,
									infoNum:{
										ding:12,
										cai:12,
										infoType:1 ,//0 没操作 1顶了  2 踩
										discussNum:12,//评论数量
										shareNum:12//分享数量
									}
								}
							]
						}
						
							]
						}
						
					
		
		},
		onLoad() {
			uni.getSystemInfo({
			    success:  (res) =>{
			      
			     let height=  res.windowHeight-uni.upx2px(100);
				 this.TabHeight=height;
			     
			    }
			});
		},
		//监听搜索框点击时间
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'../search/search'
			})
		},
		//下拉刷新	
			onPullDownRefresh() {
				setTimeout(( )=>{
				            console.log('start pulldown');
							 uni.startPullDownRefresh();
				        }, 1000);
				       
			},
		//监听导航按钮点击事件
		onNavigationBarButtonTap(e){
			switch (e.index){
				case 0:
				console.log("点击了签到")
					break;
				case 1:
				console.log("点击了发布")
				uni.navigateTo({
					url:'../add-input/add-input'
				})
					break;	
				default:
					break;
			}
		},
		methods: {
				
			//切换tab
			tap(index){
			this.tabIndex=index	
			
			},
			//滑动tab
			tabChange(event){
				this.tabIndex=event.detail.current
			},
			//上拉事件
			lodemore(index){
				console.log(this.newList[index].message)
			
				if(this.newList[index].message!="上拉加载更多"){
					return
				}
				//创建一个虚拟对象
				this.newList[index].message="加载中"
				setTimeout(()=> {
					let obj=	{
									userHeadr:'../../static/demo/datapic/10.jpg',
									userName:'我是新的',
									title:'我是标题啊',
									isGuanZhu:1, // 0 未关注 1 关注
									imgSrc:'../../static/demo/datapic/11.jpg',//图片路径
									type:'img',
									play:200000,
									infoNum:{
										ding:12,
										cai:12,
										infoType:0 ,//0 没操作 1顶了  2 踩
										discussNum:12,//评论数量
										shareNum:12//分享数量
									}
								}
					
					this.newList[index].list.push(obj);
					this.newList[index].message="上拉加载更多"
				}, 1000);
				
				
			}
	
			
		},
		created() {
			console.log("首页启动了")
		}
	}
</script>

<style>
	


</style>
